<template>
  <div id="songlistre">
     <div class="block">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="(image, index) in pic" :key="index">
    <!-- 获取图片从api中 -->
    <!-- 展示图片点击以后会跳转到对应的歌曲栏，若是没有 -->
   <router-link :to="'/newsong/'+image.targetId">
   <el-image :src="image.pic"></el-image>
   </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 推荐歌单 -->
  <p class="titleHeader">推荐歌单</p>
 <div v-for="(item,index) in resonglistarr" :key="index" class="infinite-list"   style="overflow:auto">
    <router-link :to="'/resonglist/'+item.id" class="songList">
        <img class="songlistimg" :src="item.picUrl" alt="">
        <!-- 超过8个字省略 -->
        <div class="songlistitle">{{item.name}}</div>
    </router-link>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'Resonglist',
    data(){
        return{
            pic:[],
            // 从vuex中获取id
            resonglistarr:[],
        }
    },
    methods:{
        // 轮播
        getpic(){
            axios({
                method:'get',
                url:'http://localhost:5000/banner?type=1'
            }).then((res)=>{
                console.log(res.data.banners);
                this.pic=res.data.banners;
                
            }).catch((err)=>{
                console.log(err)
            })
            
        },
        // 新歌速送
        getnewssong(){
            axios({
                method:'get',
                url:'http://localhost:5000/personalized'
            }).then((res)=>{
                console.log(res);
                this.resonglistarr=res.data.result;
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    mounted(){
        this.getpic();
        this.getnewssong();
    }
}
</script>

<style lang="scss" scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  img.songlistimg {
    width: 40px;
        border-radius: 6px;
}
p.titleHeader{
    border-left: 0.2em solid red;
}
a.songList {
    text-decoration: none;
    display: flex;
    padding: 0.5em;
}
</style>